<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    /* 清除默认样式 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* 版心 */
    .news {
        width: 360px;
        height: 200px;
        margin: 100px auto;
        background-color: white;
    }

    /* 设置新闻的头部 */
    .news .header {
        height: 34px;
        background-color: #eee;
        border: 1px solid #dbdee1;
        border-left: none;
    }

    /* 设置新闻头部的超链接 */
    .news .header a {
        width: 48px;
        background-color: white;
        border-top: 2px solid #ff844f;
        border-right: 1px solid #dbdee1;
        /* 超链接往上移动一个像素 */
        margin-top: -1px;
        /* 行内元素转块元素 */
        display: block;
        /* 去掉超链接的下划线 */
        text-decoration: none;
        /* 调整字体颜色 */
        color: black;
        /* 水平居中 */
        text-align: center;
        /* 行高等于盒子高度，垂直居中 */
        line-height: 32px;
        /* 设置字体大小 */
        font-size: 14px;
    }

    /* 超链接伪类选择器 鼠标经过变色 */
    .news .header a:hover {
        color: red;
    }

    /* 拉开li与盒子的间距 */
    .news .content {
        padding: 5px;
    }

    /* 设置新闻内容 */
    li {
        background-image: url(./../resources/小图标.png);
        background-repeat: no-repeat;
        font-size: 11px;
        line-height: 30px;
        list-style-type: disc;
    }


    .news .content a {
        text-decoration: none;
        color: black;
        padding-left: 30px;
    }

    /* 超链接伪类选择器 */
    .news .content a:hover {
        color: red;
    }
</style>

<body>



    <div class="news">
        <div class="header">
            <a href="#">新闻</a>
        </div>
        <div class="content">
            <ul>
                <li><a href="#">点赞"新农人"温暖的伸手</a></li>
                <li><a href="">在希望的田野上...</a></li>
                <li><a href="#">"中国天眼"又有新发现已在《自然》杂志发表</a></li>
                <li><a href="#">急！这个领域，缺人！月薪4万还不好招！啥情况！</a></li>
                <li><a href="#">多地力推二手房"带押过户"，有什么好出？</a></li>
            </ul>
        </div>
    </div>
</body>

</html>